<div class="main-container">
  <nav-menu></nav-menu>

  <mat-drawer-container>
      <mat-drawer #drawer class="drawer-side" mode="side">
          <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
              <!-- This is the tree node template for leaf nodes -->
              <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
                  <li class="mat-tree-node nav-item">
                      <div [routerLinkActive]="['link-active']">
                          <!-- use a disabled button to provide padding for tree leaf -->
                          <a class="drawer-link" [routerLink]="node?.path">
                              <!-- <button mat-icon-button disabled></button> -->
                              <mat-icon style="vertical-align: middle">label</mat-icon>
                              {{node.menuText}}
                          </a>
                      </div>
                  </li>
              </mat-tree-node>

              <!-- This is the tree node template for expandable nodes [routerLinkActive]="['link-active']"-->
              <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
                  <li class="nav-item">
                      <div class="mat-tree-node">
                          <div [routerLinkActive]="['link-active']">
                              <a class="drawer-link" [routerLink]="node?.path">
                                  <mat-icon style="vertical-align: middle">label</mat-icon>
                                  {{node.menuText}}
                              </a>

                              <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
                                  <mat-icon class="mat-icon-rtl-mirror">
                                      {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                                  </mat-icon>
                              </button>
                          </div>
                      </div>

                      <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
                          <ng-container matTreeNodeOutlet></ng-container>
                      </ul>
                  </li>
              </mat-nested-tree-node>
          </mat-tree>
      </mat-drawer>

      <mat-drawer-content class="drawer-content content">
          <!--每當切換選單會觸發activate執行-->
          <router-outlet (activate)='onRouterOutletActivate($event)'></router-outlet>
      </mat-drawer-content>
  </mat-drawer-container>
</div>